節點操作(DOM Manipulating)

操作 HTML元素 的 JavaScript方法 和 屬性

• createElement()

來建立一個新 HTML元素

const Element = document.createElement('div');

• appendChild(aChild)

新增一個新的子元素到現有子元素的最後面

const Element = document.createElement('div');
Element.textContent = 'Hello World';
element.appendChild(Element);    

• removeChild(child)

來移除 DOM節點

const newElement = document.querySelector('.new-element');
element.removeChild(newElement);

DOM HTML 屬性(HTML Attributes)

const element = document.querySelector('button');

• hasAttribute()

檢查元素是否有指定屬性
如果元素有指定屬性，回傳 true，否則回傳 false

console.log(element.hasAttribute('value')); // false

// 添加屬性
element.setAttribute('value', '0123456789');

console.log(element.hasAttribute('value')); // true

• getAttribute()

獲取元素指定屬性的值
如果元素有指定屬性，回傳 該屬性的值，否則回傳 null

console.log(element.getAttribute('value')); // null

// 添加屬性
element.setAttribute('value', '1111');

console.log(element.getAttribute('value')); // '1111'

• setAttribute()

設置元素指定屬性的值

// 設置屬性
element.setAttribute('value', '01234');

console.log(element.getAttribute('value')); // '01234'

• removeAttribute()

從元素中刪除指定的屬性

// 添加屬性
element.setAttribute('value', '56789');

console.log(element.getAttribute('value')); // '56789'

// 刪除屬性
element.removeAttribute('value');

console.log(element.getAttribute('value')); // null

資料來源:JavaScript DOM Manipulating (新增、修改、刪除 DOM 節點)
JavaScript DOM HTML 屬性 (HTML Attributes)